<template lang="html">
    <div class="uploadimg-box">
        <div class="box-file" v-if="isEdit">
            <input ref="imgipt" @change="uploadimg" class="file-ipt" type="file" name="" value="" accept="image/*,video/*" placeholder="">
        </div>
        <div class="box-img">
            <p class="imgPreview" v-if="!dataUrl">{{placeholder}}</p>
            <img :src="dataUrl" class="imgPreview" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name:'uploadimg',
    props:{
        imgSrc: {
            default: '',
            type: String
        },
        targetUrl:{
            default:'',
            type: String
        },
        onChange: {
            default: null,
            type: Function
        },
        isEdit:{
            default:true,
            type:Boolean
        },
        Place:{
            default:'点击上传图片',
            type:String
        }
    },
    data(){
        return{
            placeholder :'',
            dataUrl     :'',
            pathUrl     :''
        }
    },
    created(){
        this.placeholder = this.Place;
        this.dataUrl = this.imgSrc;
    },
    mounted(){

    },
    methods:{
        uploadimg(e){
            let that = this;
            let file = e.target.files[0];
            if(!file || !/image\//.test(file.type)){
                let params = {msg : '请上传图片文件'};
                that.$emit('onChange', params);
                return;
            }
            if(file.size / 1024 > 1024){
                let params = {msg : '图片最大不能超过1M'};
                that.$emit('onChange', params);
                return;
            }
            this.$refs.imgipt.value = '';//清空file input value 保证触发onChange
            if(file){
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(evt){
                    let baseSrc   = evt.target.result;
                    let params = {
                        fileName    : file.name,
                        fileData    : baseSrc,
                        modelName   : that.pathUrl
                    }
                    that.dataUrl = baseSrc;
                    that.$emit('onChange', params);
                }
            }
        },

    },
    watch:{
        'imgSrc'(curVal,oldVal){
            this.dataUrl = curVal;
        },
        'targetUrl'(curVal,oldVal){
            this.pathUrl = curVal;
        },
        'Place'(curVal){
            this.placeholder = curVal;
        }
    }
}
</script>

<style lang="css">
.uploadimg-box{
    border: 1px #ccc solid;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 5px;
}
.box-file{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
}
.file-ipt{
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.box-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.imgPreview{
    position: absolute;
    max-width: 100%;
    top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	transform-origin:50% 50%;
	-webkit-transform:translate(-50%,-50%);
	-webkit-transform-origin:50% 50%;
}
</style>
